/**
 * @author Created by qiush on 2017-06-21.
 */

const {ipcMain} = require('electron');

const resourceUtil = require('./resourceUtil');

const allCss = {};

// 延迟通知页面端, 避免不同刷新样式文件
const updateClassResponseTimeout = {};

function _toCssRuleName(rule) {
  // js 里面引用的样式名称, 是marginTop 这样驼峰式表示的
  // 但是在CSS 里面是要写成margin-top 这样, 所以需要对大写字母进行转换
  return rule.replace(/[A-Z]/g, function (upperCaseChar) {
    return `-${upperCaseChar.toLowerCase()}`;
  });
}

/**
 * 将一个设计的样式对象, 转换成字符串
 * @param {string} designId 设计的id
 * @param {*} styles 设计的样式
 */
function _concatStyle(designId, styles) {
  const arr = [];

  Object.keys(styles).forEach(className => {
    const classStyles = styles[className];

    arr.push(`#${designId} .${className} {`);

    Object.keys(classStyles).forEach(ruleName => {
      const ruleValue = classStyles[ruleName];
      if (ruleValue) {
        // 有时候过来的值是空的, 所以需要过滤一下
        const cssRuleName = _toCssRuleName(ruleName);
        arr.push(`${cssRuleName}: ${ruleValue};`);
      }
    });

    arr.push('}');
  });

  return arr.join('');
}

// 延迟通知页面端, 避免不同刷新样式文件
function _responseStyleUpdated(designId, fn) {
  if (updateClassResponseTimeout[designId]) {
    clearTimeout(updateClassResponseTimeout[designId]);
  }

  updateClassResponseTimeout[designId] = setTimeout(() => {
    updateClassResponseTimeout[designId] = null;
    fn();
  }, 320);
}

/** 添加一个新的设计的时候, 需要先添加一个样式资源 */
ipcMain.on('add-design', (event, designId) => {
  const designCss = allCss[designId] || {};
  allCss[designId] = designCss;

  resourceUtil.addResource(`${designId}.css`, _concatStyle(designId, designCss));
});

/** 更新class */
ipcMain.on('update-class', (event, designId, className, style, oldClassName) => {
  const designCss = allCss[designId] || {};
  allCss[designId] = designCss;

  if (oldClassName) {
    // 如果有旧的class name, 则需要先删除
    delete designCss[oldClassName];
    delete designCss[`${oldClassName}:hover`];
  }

  if (className) {
    // 如果有class name, 则添加; 如果是删除的情况, 则这个className 会为空字符串的
    designCss[className] = style;
  }

  resourceUtil.addResource(`${designId}.css`, _concatStyle(designId, designCss));

  // 通知页面端, class 更新了, 需要重新加载一下样式文件
  _responseStyleUpdated(designId, () => {
    event.sender.send('updated-class', designId);
  });
});
